/**
 * 获取canvas 2d context
 * @param {string} canvasId 
 */
var getCtx = function (canvasId) {
    var canvas = document.getElementById(canvasId);
    var ctx = canvas.getContext("2d");
    return ctx;
}

var demo1 = function () {
    var ctx = getCtx("canvas1");
    ctx.fillStyle = "#ff0000";
    ctx.fillRect(0, 0, 300, 150);
}

var demo2 = function () {
    var ctx = getCtx("canvas2");
    ctx.moveTo(10, 10);
    ctx.lineTo(300, 100);
    ctx.lineTo(20, 100);
    ctx.stroke();
}

var demo3 = function () {
    var ctx = getCtx("canvas3");
    //ctx.arc(x,y,半径,开始弧度,结束弧度,是否逆时针旋转)
    ctx.arc(70, 50, 40, 0, Math.PI * 2, true);
    ctx.fillStyle = "#ff0000";
    ctx.closePath();
    ctx.fill();
}

var demo4 = function () {
    var ctx = getCtx("canvas4");
    var lg = ctx.createLinearGradient(0, 0, 170, 0);
    lg.addColorStop("0", "purple");
    lg.addColorStop("0.3", "blue");
    lg.addColorStop("0.5", "cyan");
    lg.addColorStop("0.6", "green");
    lg.addColorStop("0.7", "yellow");
    lg.addColorStop("0.8", "orange");
    lg.addColorStop("1", "red");
    ctx.fillStyle = lg;
    ctx.fillRect(0, 0, 400, 200);
}

var demo5 = function () {
    var ctx = getCtx("canvas5");
    var img = new Image();
    img.src = "demo5.jpg";
    ctx.drawImage(img, 20, 30);
    //图像太大，要预加载
    img.onload = function () {
        //绘制图像，drawImage有多种重载函数，具体参考w3l
        ctx.drawImage(img, 40, 30);
    }
}

var main = function () {
    demo1();
    demo2();
    demo3();
    demo4();
    demo5();
};
main();